﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>TabStrip - Add/Remove</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/jquery.integralui.tabstrip.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-blue.css" />
    <script type="text/javascript" src="../../../external/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="../../../external/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.widget.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.integralui.tabstrip.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $tab = $('#tabstrip').tabstrip();
            
            updateTabAppearance = function(){
                var cssValue = {
                    "background-color": "transparent",
                    border: 0
                }
                
                if ($tab.tabstrip("getList").length === 0)
                    cssValue = {
                       "background-color": "white",
                       "border": "thin solid gray",
                        "border-radius": "3px"
                    }
                    
                $tab.css(cssValue);
            }
            
            updateTabAppearance();
               
            var tabCount = 0;
            var selectedTab = $tab.tabstrip("option", "selectedTab");

            $('#add-tab').click(function(e){
                e.preventDefault();
                
                tabCount++;
                $tab.tabstrip("addTab", { text: "Tab" + tabCount });
                updateTabAppearance();
            });
                      
            $('#insert-after').click(function(e){
                e.preventDefault();
                
                tabCount++;
                $tab.tabstrip("insertTabAfter", { text: "Tab" + tabCount }, $tab.tabstrip("option", "selectedTab"));
                updateTabAppearance();
            });
                      
            $('#insert-at').click(function(e){
                e.preventDefault();

                tabCount++;
                $tab.tabstrip("insertTabAt", { text: "Tab" + tabCount }, document.frm.insertAt.value);
                 updateTabAppearance();
           });
                       
            $('#insert-before').click(function(e){
                e.preventDefault();
                
                tabCount++;
                $tab.tabstrip("insertTabBefore", { text: "Tab" + tabCount }, $tab.tabstrip("option", "selectedTab"));
                updateTabAppearance();
            });
          
            $('#remove').click(function(e){
                e.preventDefault();
                
                $tab.tabstrip("removeTab", $tab.tabstrip("option", "selectedTab"));
                updateTabAppearance();
            });
          
            $('#remove-at').click(function(e){
                e.preventDefault();
               
                $tab.tabstrip("removeTabAt", document.frm.removeAt.value);
                updateTabAppearance();
           });
          
            $('#clear').click(function(e){
                e.preventDefault();
                
                $tab.tabstrip("clearTabs");
                tabCount = 0;
                updateTabAppearance();
           });
           
           $tab.on({
                "tabremoved": function(e){
                    if ($tab.tabstrip("getList").length === 0){
                        tabCount = 0;
                        updateTabAppearance();
                    }
                }
           });
        });
        
    function isNumberKey(e){
        var charCode = (e.which) ? e.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
            
        return true;
    }
    </script>
    <style type="text/css">
        .widget
        {
	        height: 300px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content">
        <div class="feature">
	        <h2 class="feature-title">TabStrip / Add - Remove</h2>
	        <div class="feature-content">
                <div id="tabstrip" class="widget"></div>
                <div class="control-panel" align="center" style="width:150px">
                    <form name="frm">
                        <button type="button" id="add-tab" style="margin:5px 0; width:125px">Add</button><br />
                        <button type="button" id="insert-after" style="margin:5px 0; width:125px">Insert After</button><br />
                        <button type="button" id="insert-before" style="margin:5px 0; width:125px">Insert Before</button><br />
                        <div style="display:inline-block; margin:3px 0; ">
                           <button type="button" id="insert-at" style="width:80px; margin-right:3px">Insert At</button><input type="number" name="insertAt" min="0" max="1000" value="0" onkeypress="return isNumberKey(event)" style="width:40px" />
                        </div>
                        <button type="button" id="remove" style="margin:5px 0; width:125px">Remove</button><br />
                        <div style="display:inline-block; margin:3px 0; ">
                            <button type="button" id="remove-at" style="width:80px; margin-right:3px">Remove At</button><input type="number" name="removeAt" min="0" max="1000" value="0" onkeypress="return isNumberKey(event)" style="width:40px" /><br />
                        </div>
                        <button type="button" id="clear" style="margin:5px 0; width:125px">Clear</button>
                    </form>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p>In this sample you can create and/or modify a list of tabs using several different methods:
                        <ul class="feature-points">
                            <li><span style="color:#c60d0d">addTab</span> - adds a new tab</li>
                            <li><span style="color:#c60d0d">insertTabAfter</span> - adds a new tab after specified tab (in this sample the selected tab)</li>
                            <li><span style="color:#c60d0d">insertTabAt</span> - adds a new tab at specified position</li>
                            <li><span style="color:#c60d0d">insertTabBefore</span> - adds a new tab before specified tab (in this sample the selected tab)</li>
                            <li><span style="color:#c60d0d">removeTab</span> - removes a tab (in this sample the selected tab)</li>
                            <li><span style="color:#c60d0d">removeTabAt</span> - removes a tab at specified position</li>
                            <li><span style="color:#c60d0d">clearTabs</span> - removes all tabs</li>
                        </ul>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
